<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/favicon.png}"/>
    <link rel="bookmark" th:href="@{/favicon.png}"/>
    <title th:text="${user.userName + '的消息通知'}">不挂高数社区</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <link rel="stylesheet" href="/css/index.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <style type="text/css">
        body {
            /*background-image: url("https://api.isoyu.com/bing_images.php");*/
            background-color: #efefef;
        }
        a {
            text-decoration: none;
        }
        a:hover{
            text-decoration: none;
        }
        .list-group-a {
            color: black;
        }
        .list-group-a:hover{
            color: #175199;
        }
        .issue-right {
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: #efefef;
        }
    </style>
    <script type="text/javascript">
        if(window.localStorage.getItem("closable") === "true") {
            window.localStorage.removeItem("closable");
            window.close();
        }
    </script>
</head>
<body>
<!-- 标题栏 使用  fixed-top 将标题栏固定在顶部 -->
<div th:insert="~{navigation :: navbar}"></div>


<div class="container" style="height: 30px">
</div>
<!-- 帖子列表显示 -->
<div class="container shadow-sm" style="background-color: white;">
    <div class="row">
        <!-- 左边 -->
        <div class="col-xl-9 mt-3 issue-right">
            <!--标题-->
            <div class="container">

                    <div class="row">
                        <div class="col">
                            <h4>
                                <img src="/image/icon/message.svg" width="35" height="35"/>
                                通知
                            </h4>
                        </div>
                        <div class="col-7">
                            <ul class="nav justify-content-end">
                                <li class="nav-item">
                                    <a class="nav-link" th:href="${'/message/'+user.getUserId()}">
                                        回复 <span class="badge badge-info" th:text="${commentCount}">0</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" th:href="${'/message/' + user.getUserId() + '?type=3'}">
                                        点赞 <span class="badge badge-info" th:text="${likeCount}">0</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" th:href="${'/message/' + user.getUserId() + '?type=5'}">
                                        系统 <span class="badge badge-info" th:text="${systemCount}">0</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a th:href="${'/message/' + user.getUserId() + '/readAll'}" class="btn btn-secondary btn-small">一键已读</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <hr style="margin-top: 0%;">
            </div>

            <div th:if="${notifications} != null" class="container">
                <ul class="list-group list-group-flush" th:each="notification : ${notifications.data}">
                    <li class="list-group-item">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div>
                                        <span th:if="${notification.getType() == 6 || notification.getType() == 8}">管理员</span>
                                        <span th:if="${notification.getType() == 7 || notification.getType() == 9}">由于管理员</span>
                                        <a th:href="${'/user/'+notification.notifierId}"><span th:text="${notification.notifierName}"></span></a>
                                        <span class="ml-2" th:text="${notification.getTypeName()}"></span>
                                        <a class="ml-2" th:href="${'/message/' + user.getUserId() +'/' + notification.getId()}"><span th:text="${notification.getOuterTitle()}"></span></a>
<!--                                    <span th:if="${notification.getType()==2}" class="ml-2">下的评论</span>-->
                                        <span th:if="${notification.getType() == 6}">如有疑问或需要恢复，请联系管理员！</span>
                                        <span th:if="${notification.getType() == 7}">导致了你的评论被牵连删除，如有疑问或需要恢复，请联系管理员！</span>
                                        <span th:if="${notification.getType() == 9}">因此你的评论也被恢复！如有疑问，请联系管理员！</span>
                                        <span class="badge badge-warning" th:if="${notification.getStatus()==0}">未读</span>
                                    </div>
                                    <a th:if="${notification.getCommentContent()!=''}" th:href="${'/message/' + user.getUserId() +'/' + notification.getId()}">
                                        <p style="padding-top: 10px; color: #989898; font-weight: bolder;"  th:text="${notification.getCommentContent()}"></p>
                                    </a>

                                </div>
                                </div>
                            <div class="row">
                                <div class="col text-right">
                                    <p th:text="${notification.getCreateTime()}"></p>
                                </div>
                            </div>
                        </div>

                    </li>
                </ul>
            </div>

            <div th:if="${notifications} == null" class="container">
                <h5>暂无新消息</h5>
            </div>
            <div class="container" th:if="${notifications} != null">
                <!-- 页码 -->
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end">
                        <!-- 返回首页 -->
                        <li class="page-item" th:if="${notifications.showFirstPage}">
                            <a class="page-link" id="first-page-a" th:href="${'/message/' + user.getUserId()} + @{/(type=${type})}" aria-label="Previous" onclick="addLocaleUrlForPage('first-page-a')">
                                <span aria-hidden="true">&laquo;&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <!-- 上一页 -->
                        <li class="page-item" th:if="${notifications.showPrevious}">
                            <a class="page-link" id="link-to-last-a" th:href="'/message/'+${user.getUserId()} + @{/(page=${notifications.nowPage-1},type=${type})}" aria-label="Previous"
                               onclick="addLocaleUrlForPage('link-to-last-a')">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>


                        <li class="page-item" th:each="page : ${notifications.pages}" th:class="${notifications.nowPage == page}? 'page-item active' : 'page-item'">
                            <a class="page-link" th:href="${'/message/'+user.getUserId()} + @{/(page=${page},type=${type})}" th:text="${page}" th:id="${page}"
                               th:onclick="'javascript:addLocaleUrlForPage(\''+${page}+'\')'">
                                1
                            </a>
                        </li>



                        <!-- 下一页 -->
                        <li class="page-item" th:if="${notifications.showNext}">
                            <a class="page-link" id="lind-to-next-a" th:href="'/message/'+${user.getUserId()} + @{/(page=${notifications.nowPage+1},type=${type})}" aria-label="Next"
                               onclick="addLocaleUrlForPage('lind-to-next-a')">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                        <!-- 最后一页 -->
                        <li class="page-item" th:if="${notifications.showEndPage}">
                            <a class="page-link" id="link-to-end-a"  th:href="'/message/'+${user.getUserId()} + @{/(page=${notifications.totalPage},type=${type})}"
                               th:if="${notifications.showEndPage}"
                               aria-label="Next" onclick="addLocaleUrlForPage('link-to-end-a')">
                                <span aria-hidden="true">&raquo;&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- 右边 -->
        <div class="col">
            <br/>
            <div class="container shadow-sm" style="background-color: white;">
                <div class="card" style="border: 0px;">
                    <h5 class="mt-4">个人成就</h5>
                    <hr/>
                    <div class="card-body mb-2">
                        <img src="/image/icon/like.svg" width="20" height="20">获得 &nbsp; <span th:text="${user.likeCount}">100</span> &nbsp;次点赞
                    </div>
                </div>
            </div>
            <br/>
            <div class="card shadow-sm" style="background-color: white; border: 0px">
                <div class="row" style="text-align: center;">
                    <br/>
                    <div class="col mt-4">
                        <a th:href="'/user/'+${user.getUserId()} + '/following/user#user'">
                            <p>关注了</p>
                            <div class="card-body mb-2">
                                <h5 th:text="${user.followCount}">100</h5>
                            </div>
                        </a>
                    </div>
                    <div class="col mt-4">
                        <a th:href="'/user/'+${user.getUserId()} + '/following/fans#fans'">
                            <p>关注者</p>
                            <div class="card-body mb-2">
                                <h5 th:text="${user.fansCount}">100</h5>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <br/>
            <div class="container shadow-sm" style="background-color: white;">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <a class="list-group-a" th:href="${'/user/' + user.userId}">动态</a>
                    </li>
                    <li class="list-group-item">
                        <a class="list-group-a" th:href="${'/user/' + user.userId + '/following/questions#question'}">关注的问题</a>
                    </li>
                    <li class="list-group-item">
                        <a class="list-group-a" th:href="${'/user/' + user.userId + '/following/topic#topic'}">关注的话题</a>
                    </li>
                    <li class="list-group-item">最新回复</li>
                    <li class="list-group-item">邀请我的问题</li>
                </ul>
            </div>
            <br/>
            <div class="container shadow-sm" style="background-color: white;">
                <p>广告</p>
                <div id="Advertisement" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators" >
                        <li th:each="ad : ${advertisements}" th:class="${adStat.index == 0} ? 'active' : ''" data-target="#Advertisement"  th:data-slide-to="${adStat.index}"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div th:each="ad : ${advertisements}" th:class="${adStat.index == 0} ? 'carousel-item active' : 'carousel-item'">
                            <a th:href="'/adUrl' + @{/(url=${ad.url},id=${ad.id})}" target="_blank">
                                <img class="d-block w-100" th:src="${ad.image}" th:alt="${ad.title}" th:title="${ad.title}">
                                <div class="carousel-caption d-none d-md-block mb-0" style="border-bottom: 0px">
                                    <p class="mb-0" th:text="${ad.title}"></p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#Advertisement" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#Advertisement" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="container" style="height: 30px">
    </div>
</div>


<!-- 页脚 -->
<div th:insert="~{footer :: footer}"></div>



<script src="/js/url.js" type="text/javascript"></script>
</body>
</html>
